<template>
	<view style="padding-bottom:50rpx;">
		<image class="topbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
		<view style="width:100%;" :style="{'height': statusheadheight + 'px'}"></view>
		<view class="head-main" :style="{'height': statusheadheight + 'px'}">
			<image class="headbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
			<view class="headsite flex" :style="{ height:ClientRectHeight+'px',lineHeight:ClientRectHeight+'px' }" @click="districtfun" >
				 <!-- @click="districtfun" -->
				<uv-icon name="map" size="16" color="#040000"></uv-icon>
				<!-- <text style="font-size:28rpx;margin: 0 10rpx;" v-if="opensiteac.name">{{ opensiteac.name }}</text> -->
				<text style="font-size:28rpx;margin: 0 10rpx;">{{ sitemsg.city }}</text>
				<uv-icon name="arrow-down-fill" size="14" color="#040000"></uv-icon>
			</view>
			<view class="head-title" :style="{ height:ClientRectHeight+'px',lineHeight:ClientRectHeight+'px' }">爱学车</view>
		</view>
		<view class="banner marginAuto" style="margin-top: 30rpx;">
			<uv-swiper @click="clickbanner" class="banner" height="160" :list="bannerdata" keyName="image"></uv-swiper>
		</view>
		<view class="classify flex">
			<view class="classify-each" @click="navigate(2,'/pages/tabbar/accompany')">
				<view class="classifyimg marginAuto">
					<image :src="apifun.serveimg+'homeclassify4.png'" mode=""></image>
				</view>
				<view class="classifytitle">汽车陪驾</view>
			</view>
			<view class="classify-each" @click="navigate(1,'/pages/home/validate')">
				<view class="classifyimg marginAuto">
					<image :src="apifun.serveimg+'homeclassify5.png'" mode=""></image>
				</view>
				<view class="classifytitle">到店验车</view>
			</view>
			<view class="classify-each" @click="apifun.navigate('/pages/home/rot')">
				<view class="classifyimg marginAuto">
					<image :src="apifun.serveimg+'homeclassify3.png'" mode=""></image>
				</view>
				<view class="classifytitle">试驾体验</view>
			</view>
			<view class="classify-each" @click="navigate(2,'/pages/tabbar/learn')">
				<view class="classifyimg marginAuto">
					<image :src="apifun.serveimg+'homeclassify1.png'" mode=""></image>
				</view>
				<view class="classifytitle">学车报名</view>
			</view>
			<view class="classify-each" @click="apifun.navigate('/pages/driving/driving')">
				<view class="classifyimg marginAuto">
					<image :src="apifun.serveimg+'homeclassify2.png'" mode=""></image>
				</view>
				<view class="classifytitle">驾考宝典</view>
			</view>
		</view>
		<!-- 附近驾校 -->
		<view class="driving marginAuto" v-if="drivingdata.length > 0">
			<image class="blocktopbg" :src="apifun.serveimg+'homebbg.png'" mode="widthFix"></image>
			<view class="drivingmain">
				<view class="drivingtop flex" @click="navigate(2,'/pages/tabbar/learn')">
					<image class="drivingtitle" :src="apifun.serveimg+'jxtitle.png'" mode=""></image>
					<view class="drivingtopr flex">
						<text>更多</text>
						<uv-icon name="arrow-right" size="16" color="#666666"></uv-icon>
					</view>
				</view>
				<view class="drivingmsg">
					<uv-scroll-list :indicator="false">
						<view v-for="(item, index) in drivingdata" :key="index" @click="navigate(1,'/pages/learn/learnxq','id='+item.id)">
							<view class="drivingeach">
								<view class="drivingeachimg">
									<view class="drivingeachjl">
										<view class="drivingeachjlbg"></view>
										<view class="drivingeachjlmsg flex">
											<uv-icon style="margin-top:5rpx;" name="map" color="#fff" size="12"></uv-icon>
											<text>{{ item.distance }}km</text>
										</view>
									</view>
									<image class="drivingeachimgimg" :src="apifun.URLimg+item.img" mode=""></image>
								</view>
								<view class="drivingeachtext">
									<view class="drivingeachtext-name ellipsis01">{{ item.name }}</view>
									<view class="drivingeachtext-doc ellipsis01">{{ item.recommend_reason }}</view>
								</view>
							</view>
						</view>
					</uv-scroll-list>
				</view>
			</view>
		</view>
		<!-- 热门活动 -->
		<view class="rot marginAuto">
			<image class="blocktopbg" :src="apifun.serveimg+'homebbg.png'" mode="widthFix"></image>
			<view class="rotmain">
				<view class="drivingtop flex" @click="navigate(1,'/pages/home/rot')">
					<view class="drivingtitle">
						<image class="drivingtopmsgicon" :src="apifun.serveimg+'roticon.png'" mode=""></image>
						<text>热门活动</text>
					</view>
					<view class="drivingtopr flex">
						<text>更多</text>
						<uv-icon name="arrow-right" size="16" color="#666666"></uv-icon>
					</view>
				</view>
				<view class="rotmsg">
					<view class="roteach flex" v-for="(item,index) in rotdata" :key="index" @click="navigate(1,'/pages/home/testdrive','id='+item.id)">
						<view class="roteachimg">
							<image :src="apifun.URLimg+item.img" mode="aspectFill"></image>
						</view>
						<view class="roteachdata">
							<view class="roteachname ellipsis01">{{ item.title }}</view>
							<view class="roteachtime">{{ item.create_time }}</view>
							<view class="roteachbm">{{ item.num }}人报名</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedfun">
			<view class="fixedeach marginAuto flex">
				<button class="fixedeachbtn" open-type="contact"></button>
				<view class="marginAuto">
					<uv-icon name="server-man" color="#ffffff" size="28"></uv-icon>
				</view>
			</view>
			<view class="fixedeach marginAuto flex" style="margin-top:30rpx;" @click="callphone()">
				<view class="marginAuto">
					<uv-icon name="phone-fill" color="#ffffff" size="26"></uv-icon>
				</view>
			</view>
		</view>
		<uv-popup ref="couponpop" round="20" type="center">
			<view class="couponpop">
				<view class="coupontitle">恭喜获得{{ packetdata.length }}张优惠券</view>
				<view class="couponcardblock">
					<view class="couponcard marginAuto" v-for="(item,index) in packetdata" :key="index">
						<image class="couponcardq" v-if="item.use_type == 1" :src="apifun.serveimg+'couponcheq1.png'" alt="学车" mode=""></image>
						<image class="couponcardq" v-if="item.use_type == 2" :src="apifun.serveimg+'couponcheq2.png'" alt="验车" mode=""></image>
						<image class="couponcardq" v-if="item.use_type == 3" :src="apifun.serveimg+'couponcheq3.png'" alt="陪驾" mode=""></image>
						<image class="couponcardbg" :src="apifun.serveimg+'couponcardbg.png'" mode=""></image>
						<view class="couponcardmain flex">
							<view class="couponcardl">
								<view class="couponcardl-money">
									<text style="font-size:50rpx;">{{ item.amount }}</text>
									<text style="font-size:24rpx;">元</text></view>
								<view class="couponcardl-doc">无门槛</view>
							</view>
							<view class="couponcardr">
								<view class="couponcardr-title">{{ item.coupon_name }}</view>
								<view class="couponcardr-time">截止日期：{{ item.use_end_time.substr(0,10) }}</view>
							</view>
						</view>
					</view>
				</view>
				<view style="width:100%;height:115rpx"></view>
				<view class="couponbtn" @click="getcounponfun" style="height:115rpx;">
					<view class="couponbtntxt">立即领取</view>
					<image :src="apifun.serveimg+'couponbtnbg.png'" mode=""></image>
				</view>
				<image class="couponpopbottbg" :src="apifun.serveimg+'couponbottombg.png'" mode=""></image>
			</view>
		</uv-popup>
		<uv-picker ref="siteref" :columns="opensitedata" keyName="name" @confirm="entersite"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				ClientRectHeight:uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				page:1,
				city:'',
				address:'',
				lng:this.apifun.lng,
				lat:this.apifun.lat,
				// lng: '',
				// lat: '',
				sitemsg:{},
				bannerdata:[],
				drivingdata:[],
				rotdata:[],
				packetdata:[],
				opensitedata:[[]],
				opensiteac:{},
			};
		},
		onShareAppMessage: function(res) {
			// 返回分享的对象，其中包含分享的路径和参数
			return {
				title:'学车，新手陪驾，验车，长途代驾监督服务品牌',
				path: '/pages/tabbar/my?invite=' + uni.getStorageSync('usermsg').id, // 分享时跳转到的路径
				imageUrl:'../../static/home.jpg'
			}
		},
		onShareTimeline: function(res) {
			return {
				title:'学车，新手陪驾，验车，长途代驾监督服务品牌',
				path: '/pages/tabbar/my?invite=' + uni.getStorageSync('usermsg').id, // 分享时跳转到的路径
				imageUrl:'../../static/home.jpg'
			};
		},
		onLoad() {
			// -------start 模拟地址
			// #ifdef H5
			this.lng = this.apifun.lng;
			this.lat = this.apifun.lat;
			this.nearbyschoolfun();
			this.getLocationInfofun();
			// #endif
			this.getpositionfun();  // 获取经纬度
			this.bannerfun();
			// -------end
			if(uni.getStorageSync('token')){
				this.couponListfun();   // 优惠券弹窗
			}
		},
		onShow() {
			this.page=1;
			this.rotdata = [];
			this.rotdatafun(); // 热门活动
			if(uni.getStorageSync('token')){
				this.couponListfun();   // 优惠券弹窗
			}
		},
		methods: {
			callphone(){
				if(!uni.getStorageSync('token')){
					this.wxlogin();
					return false
				}
				this.apifun.unirequest('/api/index/getServiceTel','post',{},(res)=>{
					if(res.code == 200){
						uni.makePhoneCall({
							phoneNumber:res.data.toString()
						});
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success:(res)=> {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						this.nearbyschoolfun();
						this.getLocationInfofun();
					}
				});
			},
			selesite(){  // 选择地址
				uni.chooseLocation({
					success: (res) => {
						this.city = res.name;
						this.address = res.address;
						this.lng = res.longitude;
						this.lat = res.latitude;
						this.nearbyschoolfun();
					}
				});
			},
			nearbyschoolfun(){  // 附近驾校
				let sendData = {
					lng:this.lng,
					lat:this.lat,
					page:1,
					limit:this.apifun.limit
				}
				this.apifun.unirequest('/api/index/getNearbySchoolList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.drivingdata = datas.data || [];
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			getLocationInfofun(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
				};
				this.apifun.unirequest('/api/index/getLocationInfo','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.sitemsg = datas.ad_info;
						uni.setStorageSync('lat', this.lat);
						uni.setStorageSync('lng', this.lng);
						uni.setStorageSync('sitemsg', datas.ad_info);
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			// 选择后台返回的地址--[作废-使用获取位置经纬度]
			districtfun(){ // 地区
				this.$refs.siteref.open();
				this.getopensitefun();
			},
			getopensitefun(){  // 获取地址
				this.apifun.unirequest('/api/study/getOpenCityList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						// datas.unshift({
						// 	name:'地区',
						// 	pid:'',
						// 	id:'',
						// 	code:''
						// })
						this.opensitedata[0] = datas;
						if(datas.length > 0){
							this.opensiteac = datas[0];
							uni.setStorageSync('servesitemsg',datas[0]);
						}
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			entersite(e){
				this.opensiteac = e.value[0];
				uni.setStorageSync('servesitemsg', this.opensiteac);
				this.page = 1;
				this.rotdata = [];
			},
			rotdatafun(){
				let sendData = {
					page:this.page,
					limit:this.apifun.limit,
					lng:this.lng,
					lat:this.lat
				}
				this.apifun.unirequest('/api/index/getActiveList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--
							return false
						}
						this.rotdata = [...this.rotdata,...datas.data]
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			// end---
			bannerfun(){
				this.apifun.unirequest('/api/index/index','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let bannerdata = [];
						datas.forEach((item,index)=>{
							bannerdata.push({
								image:this.apifun.URLimg+item.img,
								type:item.type,
								content:item.content
							})
						});
						this.bannerdata = bannerdata;
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			clickbanner(index) {
				let banneritems = this.bannerdata[index];
				if(banneritems.type == 0){
					if(banneritems.content.indexOf('tabbar')){
						uni.switchTab({
							url:banneritems.content
						})
					}else{
						this.apifun.navigate(banneritems.content)
					}
				}else{
					uni.setStorageSync('bannerxq',banneritems.content);
					setTimeout(()=>{
						this.apifun.navigate('/pages/home/bannerxq')
					},300)
				}
			},
			getcounponfun(){  //  领取优惠券
				this.apifun.unirequest('/api/coupon/sendCouponToUser','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.couponpop.close()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			couponListfun(){ // 优惠券弹窗
				this.apifun.unirequest('/api/coupon/getCouponList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.packetdata = datas;
						if(datas.length > 0){
							this.$refs.couponpop.open()
						};
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navigate(type=1,urls,params){  // 1页面 2tabbar页
				if(type == 1){
					if(uni.getStorageSync('token')){
						this.apifun.navigate(urls,params);
					}else{
						this.wxlogin()
					}
				}else{
					uni.switchTab({
						url:urls
					})
				}
			},
			wxlogin() {
				uni.getProvider({
					service: "oauth",
					success:(res) => {
						uni.login({
							provider: 'weixin', //使用微信登录
							scopes: 'auth_user',
							success: (loginRes) => {
								this.getopenid(loginRes.code);
							},
						})
					}
				})
			},
			getopenid(code){
				let sendData = {
					code: code,
				};
				this.apifun.unirequest('/api/wx/getOpenId', 'post', sendData, (res) => {
					if (res.code === 200) {
						let datas = res.data;
						this.apifun.navigate('/pages/start/login','&openid='+datas)
					} else {
						this.apifun.toast(res.msg)
					}
				}, true,true)
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.rotdata = [];
			this.rotdatafun();
			this.bannerfun();
			this.getpositionfun();  // 获取经纬度
			this.getopensitefun();
			if(uni.getStorageSync('token')){
				this.couponListfun();   // 优惠券弹窗
			}
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.rotdatafun()
		}
	};
</script>

<style scoped lang="scss">
	page{
		background: #F7F7F7;
	}
	// 头部
	.topbg{
		position:fixed;
		top: 0;
		left: 0;
		z-index:0;
		width: 100%;
		height:800rpx;
	}
	.head-main{
		position:fixed;
		top: 0px;
		left: 50%;
		margin-left: -50%;
		z-index:888;
		width: 100%;
		overflow: hidden;
		.headbg{
			width: 100%;
			height:800rpx;
			background-attachment: fixed;
		}
		.headsite{
			position: absolute;
			bottom: 0px;
			left: 24rpx;
			color: #222;
			width:230rpx;
			overflow: hidden;
		}
		.head-title{
			position: absolute;
			width: 50%;
			left: 50%;
			margin-left: -25%;
			bottom: 0px;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
	}
	.banner{
		position: relative;
		z-index: 10;
		width: 690rpx;
		height: 320rpx;
	}
	// 分类
	.classify{
		position: relative;
		z-index: 10;
		width: 90%;
		padding:30rpx 5%;
		background:#fff;
		border-top-right-radius:20rpx;
		border-top-left-radius:20rpx;
		justify-content: space-between;
		.classify-each{
			width: 20%;
			.classifyimg{
				width: 100rpx;
				height: 100rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.classifytitle{
				padding: 10rpx 0;
				line-height:50rpx;
				color: #222222;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
	// 附近驾校
	.blocktopbg{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width:100%;
	}
	.driving{
		position:relative;
		width: 650rpx;
		padding: 0 20rpx;
		border-radius:20rpx;
		background: #fff;
		margin-top: 20rpx;
		.drivingmain{
			position: relative;
			z-index: 10;
			.drivingtop{
				justify-content: space-between;
				.drivingtitle{
					padding: 30rpx 0;
					width: 150rpx;
					height:40rpx;
				}
				.drivingtopr{
					padding: 30rpx 0;
					line-height: 40rpx;
					color:#666666;
					font-size: 24rpx;
				}
			}
			.drivingmsg{
				.drivingeach{
					margin-bottom:20rpx;
					width: 250rpx;
					margin-right:20rpx;
					border-radius: 10rpx;
					box-shadow:0rpx 0rpx 16rpx #f1ebeb;
					.drivingeachimg{
						position: relative;
						width: 250rpx;
						height: 210rpx;
						.drivingeachjl{
							position: absolute;
							bottom: 10rpx;
							left: 10rpx;
							z-index: 10;
							height: 40rpx;
							padding:0 10rpx;
							.drivingeachjlbg{
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 40rpx;
								z-index: 10;
								background-color:#000000;
								opacity: .5;
								border-radius: 100rpx;
							}
							.drivingeachjlmsg{
								position: relative;
								z-index: 11;
								width: 100%;
								height: 40rpx;
								line-height: 40rpx;
								font-size: 24rpx;
								color: #fff;
							}
						}
						.drivingeachimgimg{
							width: 250rpx;
							height: 210rpx;
							border-top-left-radius: 10rpx;
							border-top-right-radius: 10rpx;
						}
					}
					.drivingeachtext{
						flex: 1;
						padding: 0 10rpx;
						.drivingeachtext-name{
							height: 50rpx;
							line-height:50rpx;
							color:#222222;
							font-size:28rpx;
						}
						.drivingeachtext-doc{
							height:40rpx;
							line-height:40rpx;
							color:#666666;
							font-size:24rpx;
						}
						
					}
				}
			}
		}
	}
	// 热门活动
	.rot{
		position:relative;
		width: 650rpx;
		padding: 0 20rpx;
		border-radius:20rpx;
		background: #fff;
		margin-top: 20rpx;
		.rotmain{
			position: relative;
			z-index: 10;
			.drivingtop{
				justify-content: space-between;
				padding: 30rpx 0;
				.drivingtitle{
					.drivingtopmsgicon{
						position: relative;
						top:2rpx;
						width:27rpx;
						height: 33rpx;
						margin-right:20rpx;
					}
					width: 200rpx;
					height:40rpx;
					font-weight: 600;
				}
				.drivingtopr{
					line-height: 40rpx;
					color:#666666;
					font-size: 24rpx;
				}
			}
			.rotmsg{
				.roteach{
					margin-bottom: 20rpx;
					.roteachimg{
						width: 280rpx;
						height: 160rpx;
						padding-bottom: 20rpx;
						image{
							width: 280rpx;
							height: 160rpx;
							border-radius:10rpx;
						}
					}
					.roteachdata{
						margin-left: 20rpx;
						.roteachname{
							font-size: 30rpx;
							color: #222222;
							line-height: 60rpx;
							font-weight: 600;
						}
						.roteachtime{
							padding: 10rpx 0;
							font-size: 26rpx;
							color: #666666;
						}
						.roteachbm{
							display: inline-block;
							font-size: 24rpx;
							color: #0089FB;
							padding:0 10rpx;
							border-radius: 4rpx;
							background: #E7F2FF;
						}
					}
				}
			}
		}
	}
	// 优惠券
	.couponpop{
		position: relative;
		width: 570rpx;
		// height:850rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom,#FFE1C9,#ffffff);
		.coupontitle{
			padding:50rpx 0 20rpx;
			color:#7E3901;
			font-size:40rpx;
			text-align: center;
			font-weight: 600;
		}
		.couponcardblock{
			width: 100%;
			// height:490rpx;
			height: 320rpx;
			overflow-y: scroll;
			padding-top:50rpx;
		}
		.couponcard{
			position:relative;
			width: 510rpx;
			height: 170rpx;
			margin-bottom:50rpx;
			.couponcardmain{
				position:absolute;
				z-index: 10;
				width: 510rpx;
				.couponcardl{
					width: 170rpx;
					text-align: center;
					.couponcardl-money{
						margin-top:20rpx;
						color: #fff;
					}
					.couponcardl-doc{
						font-size: 28rpx;
						color: #ffffff;
						line-height: 50rpx;
					}
				}
				.couponcardr{
					width:310rpx;
					margin-top: 20rpx;
					padding-left: 20rpx;
					border-left: 1px solid #FF8135;
					.couponcardr-title{
						font-size:40rpx;
						color: #fff;
						padding-top:10rpx;
					}
					.couponcardr-time{
						line-height:60rpx;
						font-size: 24rpx;
						color: #FAFAFA;
					}
				}
			}
			.couponcardq{
				position: absolute;
				top: -50rpx;
				left: 50rpx;
				z-index: 10;
				width: 150rpx;
				height: 87rpx;
			}
			.couponcardbg{
				position: absolute;
				width: 510rpx;
				height: 170rpx;
			}
		}
		.couponbtn{
			position:absolute;
			z-index: 50;
			bottom: 40rpx;
			left: 50%;
			width: 400rpx;
			margin-left: -200rpx;
			.couponbtntxt{
				position: absolute;
				z-index: 51;
				line-height: 115rpx;
				width: 400rpx;
				text-align: center;
				font-size: 36rpx;
				color: #ffffff;
			}
			image{
				position: absolute;
				left: 0;
				width: 400rpx;
				height: 115rpx;
			}
		}
		.couponpopbottbg{
			position: absolute;
			bottom: 0;
			z-index: 20;
			width: 100%;
			height: 240rpx;
		}
	}
	.fixedfun{
		position: fixed;
		z-index: 99;
		bottom:140rpx;
		right: 20rpx;
		.fixedeach{
			position: relative;
			width: 80rpx;
			height:80rpx;
			background:#4DB2F6;
			border-radius: 50%;
			.fixedeachbtn{
				position: absolute;
				left:0;
				top:0;
				z-index: 100;
				width: 80rpx;
				height:80rpx;
				opacity: 0;
			}
		}
	}
</style>